<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="__LAYUI__/layui/css/layui.css" media="all" rel="stylesheet">
		<link href="__LAYUI__/adminui/dist/css/admin.css" media="all" rel="stylesheet">
	</head>
	{include file="info" /}
	<body>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body">
							<div class="layui-form layui-form-item layui-form-pane">	
								<div class="layui-inline">
									<label class="layui-form-label">关键词</label>
									<div class="layui-input-inline">
										<input type="text" id="title" class="layui-input"  placeholder="请输入关键词">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">状态</label>
									<div class="layui-input-inline">
										<select id="status">
											<option value="">请选择状态</option>
											<option value="1">启用</option>
											<option value="2">禁用</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">置顶</label>
									<div class="layui-input-inline">
										<select id="top">
											<option value="">请选择置顶</option>
											<option value="1">是</option>
											<option value="2">否</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">日期</label>
									<div class="layui-input-inline">
										<input type="text" id="datetime" class="layui-input" placeholder="请选择日期">
									</div>
								</div>
								<div class="layui-inline">
									<button class="layui-btn" lay-submit lay-filter="article-submit"> 搜索 </button>
									<button class="layui-btn layui-btn-primary" lay-submit lay-filter="article-reset"> 重置</button>
								</div>
							</div>
							<script type="text/html" id="topDemo">
								<div class="layui-btn-container">
									<button class="layui-btn layui-btn-sm {if MyAuto('myadmin','article','edit')==false}layui-hide{/if}"
									 lay-event="add"> 添加 </button>
									<button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="reload"> 重载 </button>
									<button
									 class="layui-btn layui-btn-sm layui-btn-danger {if MyAuto('myadmin','article','del')==false}layui-hide{/if}"
									 lay-event="delall"> 删除 </button>
								</div>
							</script>
							<script type="text/html" id="TopTpl">
								<input type="checkbox" name="top" value="{{= d.id }}" title=是|否 lay-skin="switch" lay-filter="table-top"
								 {{= d.top == 1 ? "checked" : "" }}>
							</script>
							<script type="text/html" id="StatusTpl">
								<input type="checkbox" name="status" value="{{= d.id }}" title=启用|禁用 lay-skin="switch" lay-filter="table-status"
								 {{= d.status == 1 ? "checked" : "" }}>
							</script>
							<script type="text/html" id="LockTpl">
								{{# if(d.lock==1){ }}
									<span style="color:#ed1941">锁定</span>
								{{# } else if(d.lock==2){ }}
									<span style="color:#1e9fff">开放</span>
								{{# } }}
							</script>
							<table class="layui-hide" id="TableId" lay-filter="TableTer" lay-skin="row"></table>
							<script type="text/html" id="rightDemo">
								<button class="layui-btn layui-btn-xs {if MyAuto('myadmin','article','edit')==false}layui-hide{/if}"
								 lay-event="edit"> 编辑 </button>
								<button
								 class="layui-btn layui-btn-danger layui-btn-xs {if MyAuto('myadmin','article','del')==false}layui-hide{/if}"
								 lay-event="del"> 删除 </button>
							</script>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script>
	layui.use(["layer", "jquery", "form", "table", "laydate"], function() {
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var table = layui.table;
		var laydate = layui.laydate;
		//日期
		laydate.render({
			elem: "#datetime",
			theme: ["molv", "grid"] 	// 2.8+ 新增功能
		});
		
		table.render({
			elem: "#TableId",
			url: "{:url('article/index')}",
			toolbar: "#topDemo",
			method: "post",
			id: "Tableload",
			even: true,
			cols: [
				[{
					type: "checkbox",
					fixed: "left",
					width: 50
				}, {
					field: "id",
					title: "ID",
					hide: true,
					width: 80,
					align: "center"
				}, {
					field: "title",
					title: "标题",
					minWidth: 100,
					align: "center"
				}, {
					field: "status",
					title: "状态",
					templet: "#StatusTpl",
					width: 100,
					align: "center"
				}, {
					field: "top",
					title: "置顶",
					templet: "#TopTpl",
					width: 100,
					align: "center"
				}, {
					field: "postscript",
					title: "备注",
					align: "center"
				}, {
					field: "lock",
					title: "性质",
					hide: true,
					templet: "#LockTpl",
					width: 100,
					align: "center"
				}, {
					field: "create_time",
					title: "创建时间",
					width: 180,
					align: "center"
				}, {
					fixed: "right",
					title: "操作",
					templet: "#rightDemo",
					width: 150,
					align: "center"
				}]
			],
			page: true,
			limits: [15, 30, 50, 100, 200],
			limit: 15,
			done: function(res, curr, count) {
				var title=$("#title").val();
				if(title!=""){
					$("[data-field='title']").children().each(function(){
						$(this).html($(this).text().replace(title,"<span style='color:#ed1941'>"+ title +"</span>"));
					});
				}
			}
		});
		// 监听表格 - 上边操作
		table.on("toolbar(TableTer)", function(obj) {
			if (obj.event === "add") { // 监听添加操作
				layer.open({
					title: "添加信息",
					type: 2,
					offset: "r",
					anim: "slideLeft", // 从右往左
					area: ["50%", "100%"],
					shade: 0.5,
					shadeClose: false,
					move: false,
					content: "{:url('article/edit')}",
					end: function() {
						reloadData(1);
					}
				});
			} else
			if (obj.event === "reload") {
				reloadData(1);
			} else
			if (obj.event === "delall") {
				var checkStatus = table.checkStatus("Tableload");
				var data = checkStatus.data;
				if (data.length == 0) {
					top.notify.error("未选数据", "topRight");
				} else {
					var id_array = [];
					for (i = 0; i < data.length; ++i) {
						id_array.push(data[i].id);
					}
					var id_str = id_array.join(",");
					var layMsg = top.layer.msg("确定要删除?", {
						icon: 3,
						time: 20 * 1000,
						shade: 0.5,
						btnAlign: "c",
						btn: ["确定", "想想"],
						yes: function(index, layero) {
							$.ajax({
								url: "{:url('article/del')}",
								data: {
									id: id_str
								},
								type: "post",
								success: function(res) {
									if (res.code == 0) {
										top.notify.success(res.msg, "topRight");
										setTimeout(function() {
											parent.layer.close(layMsg);
											reloadData(2);
										}, 1000)
									} else {
										top.notify.error(res.msg, "topRight");
										parent.layer.close(layMsg);
									}
								}
							})
							return false;
						}
					})
				}
			}
		});
		// 监听表格 - 右边操作
		table.on("tool(TableTer)", function(obj) {
			var data = obj.data;
			if (obj.event === "edit") {
				layer.open({
					title: "编辑信息",
					type: 2,
					offset: "r",
					anim: "slideLeft", // 从右往左
					area: ["50%", "100%"],
					shade: 0.5,
					shadeClose: false,
					move: false,
					content: "{:url('article/edit')}?id=" + data.id,
					end: function() {
						reloadData(1);
					}
				});
			} else
			if (obj.event === "del") { // 监听添加操作
				var layMsg = top.layer.msg("确定要删除?", {
					icon: 3,
					time: 20 * 1000,
					shade: 0.5,
					btnAlign: "c",
					btn: ["确定", "想想"],
					yes: function(index, layero) {
						$.ajax({
							url: "{:url('article/del')}",
							data: {
								id: data.id
							},
							type: "post",
							success: function(res) {
								if (res.code == 0) {
									top.notify.success(res.msg, "topRight");
									setTimeout(function() {
										parent.layer.close(layMsg);
										reloadData(2);
									}, 1000)
								} else {
									top.notify.error(res.msg, "topRight");
									parent.layer.close(layMsg);
								}
							}
						})
						return false;
					}
				})
			}
		});
		// 监听状态 - 开关操作
		form.on("switch(table-status)", function(obj) {
			if (obj.elem.checked == false) {
				var status = 2;
			} else {
				var status = 1;
			}
			$.ajax({
				url: "{:url('article/status')}",
				type: "post",
				data: {
					id: this.value,
					status: status
				},
				success: function(res) {
					if (res.code == 0) {
						top.notify.success(res.msg, "topRight");
					} else {
						top.notify.error(res.msg, "topRight");
					}
					setTimeout(function() {
						reloadData(2);
					}, 1000)
				}
			})
			return false;
		});
		// 监听置顶 - 开关操作
		form.on("switch(table-top)", function(obj) {
			if (obj.elem.checked == false) {
				var val = 2;
			} else {
				var val = 1;
			}
			$.ajax({
				url: "{:url('article/top')}",
				type: "post",
				data: {
					id: this.value,
					top: val
				},
				success: function(res) {
					if (res.code == 0) {
						top.notify.success(res.msg, "topRight");
					} else {
						top.notify.error(res.msg, "topRight");
					}
					setTimeout(function() {
						reloadData(2);
					}, 1000)
				}
			})
			return false;
		});
		// 搜索
		form.on("submit(article-submit)", function(data){
		    // 执行搜索重载
		    reloadData(2);
		    return false; 	// 阻止默认 form 跳转
		});
		// 重置
		form.on("submit(article-reset)", function(data){
			reloadData(1);
			return false; 	// 阻止默认 form 跳转
		});
		// 有分页， 有条件重载 2为需要参数，1为不需要参数
		function reloadData( Int ) {
			//var page=$(".layui-laypage-em").next().text();
			var limits=$(".layui-laypage-limits").find("option:selected").text();
			var limit=limits.split(" ");
			
			var titleData=$("#title").val();
			var statusData=$("#status").val();
			var topData=$("#top").val();
			var datetimeData=$("#datetime").val();
			if(Int==1){
				var where="";
				$("#title").val("");
				$("#status").val("");
				$("#top").val("");
				$("#datetime").val("");
				form.render();
			}else
			if(Int==2){
				var where={title:titleData,status:statusData,top:topData,create_time:datetimeData};
			}
			table.reloadData("Tableload", {
				// 重新从第 1 页开始
				page: {
					curr:Number(1),
					limit:Number(limit[0]),
				},
				// 搜索的字段
				where: where
			},true);
		};
	});
</script>